<template>
	<!-- 登录 -->
	<view class="login">
		<view class="header">
			<view class="status-bar"></view>
			<view class="title">
				<view class="flex aside" @click="fnGoBack()">
					<uni-icons type="arrowleft" size="24" color="#fff"></uni-icons>
				</view>
				<view class="flex-c center">
					<text>欢迎来到东风彩</text>
				</view>
			</view>
		</view>
		<view class="contentBox">
			<view class="r-top flex-bc">
				<view class="flex-c" v-for="(item,index) in loginWay" :key="index" @click="fnChangeWay(index)" :class="currentIndex == index? 'active':''">
					<text>{{item}}</text>
				</view>
			</view>
			<view class="r-content">
				<view class="item flex-bc">
					<view class="inputer flex">
						<image src="../../../static/common/phone.png"></image>
						<input class="uni-input" type="number" placeholder="请输入手机号" v-model="mobile" />
					</view>
				</view>
				<view class="item flex-bc" v-if="currentIndex == 1">
					<view class="inputer flex">
						<image src="../../../static/common/verification-code.png"></image>
						<input class="uni-input" type="number" placeholder="请输入验证码" v-model="verCode" />
					</view>
					<view class="ver-code" @click="fnGetVerCode()">
						<text>{{codeText}}</text>
					</view>
				</view>
				<view class="item flex-bc" v-if="currentIndex == 0">
					<view class="inputer flex">
						<image src="../../../static/common/password.png"></image>
						<input class="uni-input" :password="showPassword" type="text" placeholder="请输入密码" v-model="pass" />
					</view>
					<view class="ifsee" v-if="pass" @click="fnSeePass()">
						<image :src="seeSrc.see" v-if="seePass"></image>
						<image :src="seeSrc.nosee" v-else></image>
					</view>
				</view>
				<view class="forget flex">
					<text style="font-size: 22rpx;padding: 20rpx 10rpx;" v-if="currentIndex == 0" @click="fnFindPass()">忘记密码?</text>
					<text style="font-size: 22rpx;padding: 20rpx 10rpx;" v-else></text>
				</view>
				<view class="item btn flex-c" @click="fnUserLogin()">
					<text>登录</text>
				</view>
				<view class="privacy flex-col-ac">
					<text class="toLogin" @click="fnToRegister()">没有账号去注册</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require('../../../common/util.js')
	export default {
		data() {
			return {
				currentIndex: 0,
				codeText: '获取验证码',
				loginWay: ['手机号登录', '验证码登录'],
				mobile: '',
				verCode: '',
				pass: '',
				flag: true,
				seePass: false,
				showPassword: true,
				seeSrc: {
					see: '../../../static/common/see.png',
					nosee: '../../../static/common/not-see.png'
				},
			};
		},
		methods: {
			fnGoBack() {
				uni.navigateBack()
			},
			fnChangeWay(index) {
				if (this.currentIndex == index) return
				this.currentIndex = index
			},
			fnFindPass() {
				uni.navigateTo({
					url: '../findPass/findPass'
				})
			},
			fnToRegister() {
				uni.navigateTo({
					url: '../register/register'
				})
			},
			// 点击查看密码
			fnSeePass() {
				if (this.seePass) { //该显示了
					this.showPassword = true
				} else {
					this.showPassword = false
				}
				this.seePass = !this.seePass
			},
			// 获取验证码
			fnGetVerCode() {
				if (util.isPhoneNo(this.mobile)) { //验证是手机号 获取验证码
					if (!this.flag) return
					var count = 60
					this.codeText = count+'s'
					var that = this
					var timer = setInterval(function() {
						that.flag = false
						count--
						that.codeText = count+'s'
						if (count <= 0) {
							clearInterval(timer)
							that.codeText = '获取验证码'
							that.flag = true
						}
					}, 1000)
					this.fnGetLoginVerCode(this.mobile)
				} else {
					return
				}
			},
			// 获取登录验证码接口
			fnGetLoginVerCode(mobile) {
				var that = this
				that.request({
					url: '/czb/User/sendSms',
					method: 'POST',
					data: {
						'type': 1,
						'mobile': mobile,
						'store_id': 1
					},
				}).then((ret) => {
					console.log(ret);
				})
			},
			fnUserLogin() { //登录
				console.log(this.currentIndex)
				if (!util.isPhoneNo(this.mobile)) return uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				if (this.currentIndex == 0) { //密码登录
					if (!this.pass) return uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					this.fnPassOrCodeLogin(this.pass, this.mobile, '', 2)
				} else { //验证码登录
					if (!this.verCode) return uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					})
					this.fnPassOrCodeLogin('', this.mobile, this.verCode, 1)
				}
			},
			fnPassOrCodeLogin(pass, mobile, verCode, type) { //登录接口
			var that = this
				this.request({
					url: '/czb/User/userLogin',
					method: 'POST',
					data: {
						'password': pass,
						'mobile': mobile,
						'store_id': 1,
						'code': verCode,
						'login_type': type
					},
				}).then((ret) => {
					console.log(ret);
					if (ret.code == 1) {
						uni.showToast({
							title: ret.message,
							icon: 'none'
						})
					}
					if(ret.code == 0){
						uni.setStorageSync('token', ret.data.token)
						that.$Store.commit('login', ret.data)
						uni.showToast({
							title: ret.message,
							icon: 'success'
						})
						setTimeout(function(){
							uni.switchTab({
								url:'../../index/index'
							})
						},1500)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		height: 100%;
	}

	.header {
		height: 704rpx;
		width: 100%;
		background: url(../../../static/common/top-bg.png)no-repeat center/100%;

		.status-bar {
			height: var(--status-bar-height);
		}

		.title {
			width: 100%;
			font-size: 32rpx;
			color: #fff;
			/*  #ifdef  H5  */
			height: 88rpx;
			/*  #endif  */
			/*  #ifdef  APP-PLUS  */
			height: 60rpx;
			/*  #endif  */
			padding-top: var(--status-bar-height);
			box-sizing: border-box;
			position: relative;

			view {
				padding: 0 10rpx;
				height: 100%;
				box-sizing: border-box;
				align-items: center;
				font-size: 48rpx;
				color: #F4F5FA;
			}

			.aside {
				width: 20%;
			}

			.center {
				position: absolute;
				top: 60rpx;
				left: 50%;
				transform: translateX(-50%);
			}
		}
	}

	.contentBox {
		width: 638rpx;
		box-shadow: 0px 6rpx 40rpx 0px rgba(0, 0, 0, 0.1);
		border-radius: 30px;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin: 0 auto 20rpx;
		top: -156rpx;
		position: relative;
		color: #F2342D;
		font-size: 32rpx;
		padding-bottom: 62rpx;

		.r-top {
			height: 126rpx;
			background: #FFFFFF;
			border-bottom: 1rpx solid #eee;
			border-radius: 30rpx 30rpx 0px 0px;

			view {
				flex: 1;
				height: 100%;
				background: #F9F9F9;
				border-radius: 30rpx 30rpx 0px 0px;
				box-sizing: border-box;
				color: #333;
			}

			.active {
				background: #fff;
				border-bottom: 4rpx solid #F2342D;
				color: #F2342D;
			}
		}

		.r-content {
			width: 550rpx;
			margin: 0 auto;

			.item {
				margin-top: 40rpx;
				height: 100rpx;
				background: #F7F8F9;
				border-radius: 50rpx;
				width: 100%;
				padding: 0 50rpx;
				box-sizing: border-box;

				.inputer {
					align-items: center;

					image {
						width: 46rpx;
						height: 46rpx;
						margin-right: 10rpx;
						display: block;
					}

					.uni-input {
						font-size: 28rpx !important;
						color: #333 !important;
					}

				}

				.ver-code {
					padding: 20rpx 0;
					font-size: 24rpx;
					color: #F54137;

					text {
						white-space: nowrap;
					}
				}

				.ifsee {
					image {
						width: 32rpx;
						height: 24rpx;
					}
				}
			}

			.forget {
				padding: 10rpx;
				justify-content: flex-end;
			}

			.btn {
				background: linear-gradient(270deg, #F22F29, #FC6655);
				margin: 30rpx 0 10rpx;
				color: #fff;
				font-size: 34rpx;
			}

			.privacy {
				font-size: 22rpx;
				color: #999;

				.choose {
					padding: 10rpx;

					image {
						width: 24rpx;
						height: 24rpx;
					}
				}

				.toLogin {
					color: #666;
					padding: 20rpx;
				}

				.agreement {
					font-size: 20rpx;

					text {
						color: #F54137;
					}
				}
			}
		}
	}
</style>
